<!-- 规则信息表单 -->
<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="125px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="是否为通用规则" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio label="是" name="type" />
          <el-radio label="否" name="type" />
        </el-radio-group>
      </el-form-item>
      <div v-if="ruleForm.type === '否'">
        <el-form-item label="校区" prop="school">
          <el-select
            v-model="ruleForm.school"
            multiple
            collapse-tags
            collapse-tags-tooltip
            placeholder="请选择校区"
            style="width: 240px;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班级类型" prop="classType">
          <el-select
            v-model="ruleForm.classType"
            placeholder="请选择班级类型"
            style="width: 240px;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div v-for="(subItem, index) in ruleForm.data" :key="index" class="dynamic-form">
          <el-form-item :label="index === 0 ? '学科' : ''" :prop="`data[${index}].subject`" :rules="{ required: true, message: '请选择学科', trigger: 'change' }">
            <el-select
              v-model="subItem.subject"
              placeholder="请选择学科"
              style="width: 240px;"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label-width="10" :prop="`data[${index}].teachMode`" :rules="{ required: true, message: '请选择授课模式', trigger: 'change' }">
            <el-select
              v-model="subItem.teachMode"
              placeholder="请选择授课模式"
              style="width: 240px;"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-icon v-if="index === 0" class="icon add-icon" color="#7aa7e8" size="18" @click="addFn(index)"><Plus /></el-icon>
            <el-icon v-else class="icon" color="#aaa" size="18" @click="delFn(index)"><Delete /></el-icon>
          </el-form-item>
        </div>
        
        <el-form-item label="付费类型" prop="payType">
          <el-select
            v-model="ruleForm.payType"
            placeholder="请选择付费类型"
            style="width: 240px;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="就读状态" prop="status">
          <el-select
            v-model="ruleForm.status"
            placeholder="请选择就读状态"
            style="width: 240px;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script name="ruleDetailForm">
import { reactive, ref } from 'vue'

export default {
  setup() {
    const ruleFormRef = ref()
    const ruleForm = reactive({
      type: '是',
      school: [],
      classType: '',
      data: [{
        subject: '',
        teachMode: ''
      }],
      payType: '',
      status: ''
    })
    
    const rules = reactive({
      school: [
        { type: 'array', required: true, message: '请选择校区', trigger: 'change' }
      ],
      classType: [
        { required: true, message: '请选择班级类型', trigger: 'change' }
      ],
      payType: [
        { required: true, message: '请选择付费类型', trigger: 'change' }
      ],
      status: [
        { required: true, message: '请选择就读状态', trigger: 'change' }
      ]
    })
    const options = [
      {
        value: 'Option1',
        label: 'Option1'
      },
      {
        value: 'Option2',
        label: 'Option2'
      },
      {
        value: 'Option3',
        label: 'Option3'
      },
      {
        value: 'Option4',
        label: 'Option4'
      },
      {
        value: 'Option5',
        label: 'Option5'
      }
    ]
    // 添加
    const addFn = () => {
      ruleForm.data.push({
        subject: '',
        teachMode: ''
      })
    }
    // 删除
    const delFn = index => {
      ruleForm.data.splice(index, 1)
    }
    return {
      ruleFormRef,
      ruleForm,
      rules,
      options,
      addFn,
      delFn
    }
  }
}
</script>
<style scoped lang="scss">
  .input {
    width: 300px;
  }
  .dynamic-form {
    display: flex;
  }
  .icon {
    margin-left: 15px;
    cursor: pointer;
  }
  .add-icon {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    background-color: #eaefff;
  }
</style>

